<template>
  <div>
    <el-container>

      <el-main>
        <el-card class="box-card" style="margin-left: -10px;margin-top:5px;height: 70px">
          <div slot="header" class="clearfix" style="height: 30px;">
            <span style="float:left;margin-top: -10px;height: 30px">我的消息-未读（{{this.total}}）</span>
          </div>
        </el-card>

        <el-card class="box-card" v-for="t in noticeContentVoList" :key="index" style="margin-left: -10px;margin-top: -1px;height: 120px">
          <div style="float: left;margin-top: -5px;margin-left: 5px;width: 900px;" >
            <el-link target="_blank"  style="font-size: 16px;float: left">
              <span style="font-weight:bold ;">{{ t.content }}</span>
            </el-link>
          </div>
          <div style="float: left;margin-top: -5px;margin-left: 5px;width: 900px;" >
            <el-link target="_blank"  style="font-size: 10px;float: left">
              <span>{{ t.time }}</span>
            </el-link>
          </div>
          <div style="float: right;margin-top: 20px">
              <span style="font-size: 10px;margin-left: 5px;">
                <el-link target="_blank" @click="isRead(t.id)" style="font-size: 5px;float: left;color: #F56C6C">
                  标记已读
                </el-link>
              </span>
          </div>
        </el-card>
        <!--分页组件-->
        <div class="block" v-show="showPagination" style="float:left;margin-left: 200px">
          <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="pageNo"
              :page-sizes="[3, 5]"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total">
          </el-pagination>
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<script>
export default {
  name: "userCenter-myNotice",
  data(){
    return{
      pageNo: 1, //当前页数
      pageSize: 3, //显示条数
      total: 0, //总条数
      showPagination: false, //分页栏是否显示
      noticeContentVoList:[{
        id:'',userId:'',noticeContentId:'',
        isRead:'',content:'',time:''
      }]
    }
  },
  methods:{
    //分页相关
    handleSizeChange(val) {
      this.pageSize=val;
      this.pageNo=1;//当切换一页显示几个的时候，我们要把页码切换第一页
      this.getCollectTopicList();
      //console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      this.pageNo=val;
      this.getCollectTopicList();
      //console.log(`当前页: ${val}`);
    },
    //获取用户未读的消息
    getUserNotice(){
      this.$myAxios('/userCenter/getUserNoticeListJ','post',{
        pageNo:(this.pageNo - 1) * this.pageSize,
        pageSize:this.pageSize
      },resp=>{
        console.log(resp)
        this.noticeContentVoList=resp.data.data.noticeContentVoList;
        this.total=resp.data.data.total;
        if(this.total==0){
          this.showPagination=false;
        }else{
          this.showPagination=true;
        }
      })
    },
    //标记为已读
    isRead(id){
      this.$myAxios('/userCenter/setNoticeIsCheckJ','post',{
        id:id
      },resp=>{
        this.getUserNotice();
      })
    }
  },
  created() {
    //获取用户未读的消息
    this.getUserNotice();
  }
}
</script>

<style scoped>
.el-main {
  color: #333;
  text-align: center;
  line-height: 40px;
}
</style>